<!-- src/components/QualityReportDialog.vue (修改后) -->
<template>
  <!-- 弹窗主体：v-model现在绑定到了一个计算属性上 -->
  <el-dialog
    v-model="showDialog"
    title="数据报告详情"
    width="60%"
    top="5vh"
  >
    <!-- ... 弹窗内部的其他内容保持不变 ... -->
    <el-scrollbar height="80vh">
        <div class="report-container">
          <!-- 1. 产品信息 -->
          <div class="product-info">
            <el-image
              style="width: 60px; height: 60px; border-radius: 50%;"
              src="https://axure-file.lanhuapp.com/md5__c67741d3dbe6c42b6ac1f146be661f1f.png"
              fit="cover"
            />
            <div class="product-details">
              <p class="product-title">1m (3ft) MTP®跳线, MTP®-12 UPC (母头) 转MTP®-12 UPC (母头), 12芯, 多模 (OM3), 阻燃 (OFNP)</p>
              <p class="product-sn">SN: 12FMTPOM3</p>
            </div>
          </div>

          <!-- 2. 统计数据网格 -->
          <el-row :gutter="20" class="stats-grid">
            <el-col :xs="12" :sm="8" v-for="item in statsData" :key="item.label">
              <div class="stat-card">
                <div class="stat-label">{{ item.label }}</div>
                <div class="stat-value">{{ item.value }}</div>
              </div>
            </el-col>
          </el-row>
          
          <!-- 3. CPK 值 -->
          <div class="cpk-container">
            <span class="cpk-label">CPK:</span>
            <span class="cpk-value">0.6534</span>
          </div>

          <!-- 4. 图表区域 -->
          <div class="charts-section">
            <div class="chart-box">
              <p class="chart-title">正态分布图</p>
              <v-chart class="chart" :option="normalDistOption" autoresize />
            </div>
            <div class="chart-box">
              <p class="chart-title">X-BAR</p>
              <v-chart class="chart" :option="xBarOption" autoresize />
            </div>
            <div class="chart-box">
              <p class="chart-title">R-CHART</p>
              <v-chart class="chart" :option="rChartOption" autoresize />
            </div>
          </div>
        </div>
      </el-scrollbar>
  </el-dialog>
</template>

<script setup lang="ts">
// 变化点 1: 引入 computed
import { ref, computed } from 'vue'; 
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkLineComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';

// 按需引入 ECharts 模块
use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  MarkLineComponent
]);

// 变化点 2: 定义props和emits以支持v-model
const props = defineProps<{
  modelValue: boolean // v-model 会自动传递 modelValue 这个 prop
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void // v-model 需要 'update:modelValue' 事件
}>();

// 变化点 3: 使用计算属性连接prop和dialog的v-model
const showDialog = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});


// --- 以下的所有数据和图表配置保持不变 ---

// 1. 硬编码的统计数据
const statsData = ref([
  { label: '总数', value: 3457 }, { label: '最大值', value: 0.2 }, { label: '最小值', value: 0.02 },
  { label: 'LSL', value: 0.01 }, { label: '极差', value: 0.18 }, { label: 'CP', value: 1.3271 },
  { label: '平均值', value: 0.0937 }, { label: '极差平均值', value: 0.1128 }, { label: 'CPU', value: 2.0008 },
  { label: 'USL', value: 0.35 }, { label: '标准差', value: 0.0427 }, { label: 'CPL', value: 0.6534 },
]);
// 2. 正态分布图配置
const normalDistOption = ref({ /* ...配置保持不变... */ 
  grid: { top: 40, right: 40, bottom: 30, left: 30 },
  xAxis: { type: 'value', min: -0.01, max: 0.27, },
  yAxis: { type: 'value', name: '概率密度', max: 20, },
  series: [{ type: 'line', smooth: true, showSymbol: false, lineStyle: { color: '#c23531' }, data: [ [0.01, 0.1], [0.03, 1], [0.05, 5], [0.0937, 18], [0.14, 5], [0.16, 1], [0.18, 0.1] ], markLine: { symbol: 'none', label: { show: false }, lineStyle: { type: 'dotted', color: '#666' }, data: [ { name: 'LSL', xAxis: 0.01 }, { name: 'Mean', xAxis: 0.0937 }, { name: 'USL', xAxis: 0.25 } ] } }]
});
// 生成模拟数据
const generateRandomData = (count: number, center: number, range: number) => Array.from({ length: count }, () => center + (Math.random() - 0.5) * range);
// 3. X-BAR 图配置
const xBarOption = ref({ /* ...配置保持不变... */ 
  grid: { top: 40, right: 20, bottom: 30, left: 40 },
  xAxis: { type: 'category', boundaryGap: false, axisLabel: { show: false }, axisTick: { show: false } },
  yAxis: { type: 'value', min: 0.01, max: 0.38, interval: 0.09, axisLabel: { formatter: (value: number) => value.toFixed(2) } },
  legend: { data: ['LCL', 'CL', 'UCL'], right: 10, top: 0 },
  series: [{ type: 'line', symbol: 'circle', symbolSize: 6, itemStyle: { color: '#546570' }, lineStyle: { color: '#546570' }, data: generateRandomData(100, 0.0937, 0.15), markLine: { symbol: 'none', label: { show: false }, data: [ { name: 'UCL', yAxis: 0.35, lineStyle: { color: '#d48265', type: 'dotted' } }, { name: 'CL', yAxis: 0.0937, lineStyle: { color: '#91c7ae', type: 'dashed' } }, ] } }]
});
// 4. R-CHART 配置
const rChartOption = ref({ /* ...配置保持不变... */
  grid: { top: 20, right: 20, bottom: 30, left: 40 },
  xAxis: { type: 'category', boundaryGap: false, axisLabel: { show: false }, axisTick: { show: false } },
  yAxis: { type: 'value', min: 0.03, max: 0.187, interval: 0.03 },
  series: [{ type: 'line', symbol: 'circle', symbolSize: 4, itemStyle: { color: '#c23531' }, lineStyle: { color: '#c23531' }, data: generateRandomData(100, 0.1128, 0.1), }]
});
</script>

<!-- 样式保持不变 -->
<style scoped>
.report-container { padding: 0 20px; }
.product-info { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.product-details { display: flex; flex-direction: column; }
.product-title { font-weight: bold; margin: 0; color: #303133; }
.product-sn { color: #909399; font-size: 14px; margin: 5px 0 0 0; }
.stats-grid { margin-top: 20px; }
.stat-card { background-color: #f9f9f9; border: 1px solid #e9e9eb; border-radius: 4px; padding: 15px; text-align: left; margin-bottom: 20px; }
.stat-label { color: #606266; font-size: 14px; margin-bottom: 8px; }
.stat-value { color: #303133; font-size: 20px; font-weight: bold; }
.cpk-container { text-align: right; margin: 0px 0 30px; }
.cpk-label { font-size: 18px; font-weight: bold; color: #303133; }
.cpk-value { font-size: 28px; font-weight: bold; color: #4caf50; margin-left: 10px; }
.charts-section { display: flex; flex-direction: column; gap: 20px; }
.chart-box { border: 1px solid #eee; padding: 10px; }
.chart-title { font-weight: 600; margin: 0 0 10px 10px; color: #303133; }
.chart { height: 300px; width: 100%; }
</style>
